<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机票搜索结果 - 携程旅行网</title>
    <link rel="stylesheet" href="css/flight.css">
    <link rel="stylesheet" href="css/main.css">

</head>

<body>
    <!-- 顶部导航栏（复用首页 header） -->
    <header class="ctrip-header">
        <div class="container">
            <div class="header-top">
                <div class="logo">
                    <a href="#"><img src="picture/logo.png" alt="携程旅行网" /></a>
                </div>
                <div class="nav-main">
                    <ul>
                        <li><a href="#" class="active"><i class="fas fa-hotel"></i> 酒店</a></li>
                        <li><a href="flight.html"><i class="fas fa-plane"></i> 机票</a></li>
                        <li><a href="#"><i class="fas fa-train"></i> 火车票</a></li>
                        <li><a href="#"><i class="fas fa-ship"></i> 旅游</a></li>
                        <li><a href="#"><i class="fas fa-car"></i> 租车</a></li>
                        <li><a href="#"><i class="fas fa-utensils"></i> 美食</a></li>
                        <li><a href="#"><i class="fas fa-gift"></i> 团购</a></li>
                    </ul>
                </div>
                <div class="user-area">
                    <a href="#" class="login">登录/注册</a>
                    <a href="#" class="app-download">下载携程APP</a>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <!-- 搜索条件展示 -->
        <div class="search-condition">
            <div class="condition-item">
                <div class="condition-label">行程</div>
                <div class="condition-value">北京 → 上海 往返</div>
            </div>
            <div class="condition-item">
                <div class="condition-label">日期</div>
                <div class="condition-value">2023-12-15 去程 | 2023-12-20 返程</div>
            </div>
            <div class="condition-item">
                <div class="condition-label">乘客</div>
                <div class="condition-value">2位成人</div>
            </div>
            <div class="condition-item">
                <div class="condition-label">舱位</div>
                <div class="condition-value">经济舱</div>
            </div>
            <a href="flight.html" class="modify-search">修改搜索条件</a>
        </div>

        <!-- 筛选工具栏 -->
        <div class="filter-bar">
            <div class="filter-group">
                <div class="filter-title">起飞时间</div>
                <div class="filter-options">
                    <div class="filter-option active">不限</div>
                    <div class="filter-option">00:00-06:00</div>
                    <div class="filter-option">06:00-12:00</div>
                    <div class="filter-option">12:00-18:00</div>
                    <div class="filter-option">18:00-24:00</div>
                </div>
            </div>
            <div class="filter-group">
                <div class="filter-title">航空公司</div>
                <div class="filter-options">
                    <div class="filter-option active">不限</div>
                    <div class="filter-option">中国国航</div>
                    <div class="filter-option">东方航空</div>
                    <div class="filter-option">南方航空</div>
                </div>
            </div>
        </div>

        <!-- 排序栏 -->
        <div class="sort-bar">
            <div class="sort-option active">推荐排序</div>
            <div class="sort-option">价格最低</div>
            <div class="sort-option">起飞时间</div>
            <div class="sort-option">到达时间</div>
            <div class="sort-option">飞行时长</div>
        </div>

        <!-- 航班列表 -->
        <div class="flight-list">
            <!-- 航班项1 -->
            <div class="flight-item">
                <div class="flight-header">
                    <div class="airline-info">
                        <img src="picture/h1.webp" alt="中国国航" class="airline-logo">
                        <span class="airline-name">中国国航</span>
                        <span class="flight-number">CA1837</span>
                    </div>
                    <div class="flight-tag">可退改</div>
                </div>
                <div class="flight-body">
                    <div class="flight-time">
                        <div class="time">08:30</div>
                        <div class="airport">北京首都(PEK)</div>
                    </div>
                    <div class="flight-duration">
                        <div class="duration-line"></div>
                        <div class="duration-text">2小时30分钟</div>
                        <div class="flight-type">直飞</div>
                    </div>
                    <div class="flight-time">
                        <div class="time">11:00</div>
                        <div class="airport">上海浦东(PVG)</div>
                    </div>
                    <div class="flight-price">
                        <div class="price">¥480</div>
                        <div class="price-desc">经济舱</div>
                        <button class="book-btn">预订</button>
                    </div>
                </div>
                <div class="flight-footer">
                    <div class="flight-tag">含20kg行李</div>
                    <div class="flight-tag">含餐食</div>
                </div>
            </div>

            <!-- 航班项2 -->
            <div class="flight-item">
                <div class="flight-header">
                    <div class="airline-info">
                        <img src="picture/h2.webp" alt="东方航空" class="airline-logo">
                        <span class="airline-name">东方航空</span>
                        <span class="flight-number">MU5123</span>
                    </div>
                    <div class="flight-tag">可退改</div>
                </div>
                <div class="flight-body">
                    <div class="flight-time">
                        <div class="time">14:20</div>
                        <div class="airport">北京首都(PEK)</div>
                    </div>
                    <div class="flight-duration">
                        <div class="duration-line"></div>
                        <div class="duration-text">2小时10分钟</div>
                        <div class="flight-type">直飞</div>
                    </div>
                    <div class="flight-time">
                        <div class="time">16:30</div>
                        <div class="airport">上海虹桥(SHA)</div>
                    </div>
                    <div class="flight-price">
                        <div class="price">¥520</div>
                        <div class="price-desc">经济舱</div>
                        <button class="book-btn">预订</button>
                    </div>
                </div>
                <div class="flight-footer">
                    <div class="flight-tag">含20kg行李</div>
                    <div class="flight-tag">含餐食</div>
                </div>
            </div>

            <!-- 航班项3 -->
            <div class="flight-item">
                <div class="flight-header">
                    <div class="airline-info">
                        <img src="picture/h3.webp" alt="南方航空" class="airline-logo">
                        <span class="airline-name">南方航空</span>
                        <span class="flight-number">CZ3101</span>
                    </div>
                    <div class="flight-tag">特价票</div>
                </div>
                <div class="flight-body">
                    <div class="flight-time">
                        <div class="time">09:15</div>
                        <div class="airport">北京大兴(PKX)</div>
                    </div>
                    <div class="flight-duration">
                        <div class="duration-line"></div>
                        <div class="duration-text">2小时45分钟</div>
                        <div class="flight-type">经停</div>
                    </div>
                    <div class="flight-time">
                        <div class="time">12:00</div>
                        <div class="airport">上海浦东(PVG)</div>
                    </div>
                    <div class="flight-price">
                        <div class="price">¥450</div>
                        <div class="price-desc">经济舱</div>
                        <button class="book-btn">预订</button>
                    </div>
                </div>
                <div class="flight-footer">
                    <div class="flight-tag">含20kg行李</div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <div class="page-item">
                <a href="#" class="page-link">上一页</a>
            </div>
            <div class="page-item">
                <a href="#" class="page-link active">1</a>
            </div>
            <div class="page-item">
                <a href="#" class="page-link">2</a>
            </div>
            <div class="page-item">
                <a href="#" class="page-link">3</a>
            </div>
            <div class="page-item">
                <a href="#" class="page-link">下一页</a>
            </div>
        </div>
    </div>

    <script>
        // 筛选选项点击事件
        document.querySelectorAll('.filter-option').forEach(option => {
            option.addEventListener('click', function () {
                const group = this.closest('.filter-options');

                // 如果是"不限"选项，取消同组其他选项的选中状态
                if (this.textContent === '不限') {
                    group.querySelectorAll('.filter-option').forEach(opt => {
                        opt.classList.remove('active');
                    });
                } else {
                    // 取消同组的"不限"选项
                    const unlimited = group.querySelector('.filter-option:first-child');
                    unlimited.classList.remove('active');
                }

                this.classList.add('active');

                // 这里可以添加筛选逻辑，重新加载航班列表
                console.log('筛选条件改变，重新加载航班数据');
            });
        });

        // 排序选项点击事件
        document.querySelectorAll('.sort-option').forEach(option => {
            option.addEventListener('click', function () {
                document.querySelectorAll('.sort-option').forEach(opt => {
                    opt.classList.remove('active');
                });
                this.classList.add('active');

                // 这里可以添加排序逻辑，重新排序航班列表
                console.log('排序条件改变，重新排序航班数据');
            });
        });

        // 预订按钮点击事件
        document.querySelectorAll('.book-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                // 这里可以跳转到预订页面
                console.log('跳转到预订页面');
            });
        });
    </script>
</body>

</html>